<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Celestial Home - Extracting every detail of your dream</title>
    <link rel="Stylesheet" type="text/css" href="css/master.css" />
    <link rel="Stylesheet" type="text/css" href="css/forms.css" />
    <link rel="Stylesheet" type="text/css" href="css/register.css" />
	

 <script type="text/javascript" src="javascripts/helpers.js"></script>
 <script type="text/javascript" src="javascripts/login.js"></script>
 <script type="text/javascript" src="javascripts/register.js"></script>
 <script type="text/javascript">
     window.onload = function() {
         if (checkLogin())
             window.location = "login.html";
         else 
            displayPopup("Kindly fill up the form below to register", "center", 2500);
     }
    </script>
</head>
<body>

<div id="divTitle">
    <div id="divCustMenu">
        <img src="images/user.png" alt="user" /><a id="aLogin" href="login.html">Login</a> |
        <img src="images/profile.png" alt="profile" /><a id="aProfile" href="particulars.html">My Profile</a> |
        <img src="images/cart.png" alt="cart" /><a href="construct.html">My Cart</a> | 
        <img src="images/checkout.png" alt="checkout" /><a href="construct.html">Checkout</a>
    </div><!--ends divCustmenu-->
    <div id="divWelcome"></div>
</div><!--ends divTitle-->

<!-- Navigation Bar - common for all pages -->
<div id="divNavBar">
    <ul id="ulNavBar">
        <li><img src="images/home.png" alt="home"/><a href="index.html"> Home</a></li>
        <li><img src="images/briefcase.png" alt="home"/><a href="about.html"> About Us</a></li>
        <li><img src="images/chair.png" alt="home"/><a href="construct.html"> Products</a>
            <ul>
                <li><a href="construct.html">Bed Room</a>
                    <ul>
                        <li><a href="construct.html">Beds</a></li>
                        <li><a href="construct.html">Wardrobes</a></li>
                    </ul>
                </li>
                <li><a href="construct.html">Dining Room</a>
                    <ul>
                        <li><a href="construct.html">Chairs</a></li>
                        <li><a href="construct.html">Dining Tables</a></li>
                        <li><a href="construct.html">Dining Sets</a></li>
                    </ul>
                </li>
                <li><a href="construct.html">Living Room</a>
                    <ul>
                        <li><a href="construct.html">Coffee Tables</a></li>
                        <li><a href="construct.html">Sofa</a></li>
                        <li><a href="construct.html">Sofa Sets</a></li>
                        <li><a href="construct.html">TV Cabinets</a></li>
                    </ul>
                </li>
                <li><a href="construct.html">Study Room</a>
                    <ul>
                        <li><a href="construct.html">Desks</a></li>
                        <li><a href="construct.html">Book Shelves</a></li>
                    </ul>
                </li>
            </ul>
        </li> <!--ends Products menu-->
        <li><img src="images/design.png" alt="home"/><a href="construct.html"> Design</a>
            <ul>
                <li><a href="construct.html">Wardrobe</a></li>
                <li><a href="construct.html">Home Theatre</a></li>
            </ul>
        </li> <!--ends design menu-->
        <li><img src="images/earth.png" alt="home"/><a href="construct.html"> Support</a>
            <ul>
                <li ><a href="contact.html">Contact Us</a></li>
                <li><a href="construct.html">Track Your Order</a></li>
            </ul>
        </li> <!--ends support menu-->
    </ul>  <!--ends navigation menu-->
</div> <!--ends navigation division--> 

<div id="divMain">

<div class="divFormsWrap">
        <form action="#">
            <fieldset id="fsetRegistrationDetails">
                <p class="pLegend">Registration Details</p>
                <label><em class="emStar">*&nbsp</em>Email:</label>
                <input id="txtEmail" type="text" class="ipBoxes" onchange="validate(this)"/>
                <div id="divEmailError" class="divError"></div>
                <br />    
                <label><em class="emStar">*&nbsp</em>Password:</label>
                <input id="txtPassword" type="password" maxlength="20" class="ipBoxes" onkeyup="getPasswordStrength(this)"/>
                <div id="divPasswordStrength"><img src="images/strong.png" /></div>
                <div id="divPasswordError" class="divError"></div>
                <br />
                <label><em class="emStar">*&nbsp</em>Retype:</label><input id="txtRetypePassword" type="password" maxlength="20" class="ipBoxes" onblur="validate(this)" onfocus="clearError(document.getElementById('divRetypePasswordError'))"/>
                <div id="divRetypePasswordError" class="divError"></div>
                <br /><br />          
                <label><em class="emStar">*&nbsp</em>First Name:</label>
                <input id="txtFirstName" type="text"  maxlength="30" class="ipBoxes" onblur="validate(this)"/>
                <div id="divFirstNameError" class="divError"></div>
                <br />   
                <label><em class="emStar">*&nbsp</em>Last Name:</label>
                <input id="txtLastName" type="text"  maxlength="30" class="ipBoxes" onblur="validate(this)"/>
                <div id="divLastNameError" class="divError"></div>
                <br />
                <label><em class="emStar">*&nbsp</em>DOB (d/m/y):</label>
                <input id="txtDOB_Day" type="text" size="1" maxlength="2" onkeypress="return numbersOnly(event)" onkeyup="checkRange(this, 31)" onblur="validate(this)"/> /
                <input id="txtDOB_Month" type="text" size="1" maxlength="2"  onkeypress="return numbersOnly(event)" class="ipInline" onkeyup="checkRange(this, 12)" onblur="validate(this)"/> /
                <input id="txtDOB_Year" type="text" size="2" maxlength="4"  onkeypress="return numbersOnly(event)" class="ipInline" onkeyup="checkRange(this, 1999)" onblur="validate(this)"/ />
                <div id="divDOB_Error" class="divError"></div>
                <br />
                <label>Contact:</label>
                <input id="txtContact" type="text" class="ipBoxes" maxlength="20" onkeypress="return looseNumbersOnly(event)" onblur="validate(this)" />
                <div id="divContactError" class="divError"></div>
                <br /><br />
                <div id="divSaveCreditCard">
                    Do you want to save a credit card?
                    <br />
                    <input type="radio" value="yes" name="radSaveCreditCard" onclick="showCreditCardFieldset()"/> Yes
                    <input type="radio" value="no" checked="checked" name="radSaveCreditCard" class="ipInline" onclick="hideCreditCardFieldset()"/> No
                </div>
                
            </fieldset><!--ends fsetParticulars-->
            <fieldset id="fsetCreditCardDetails" class = "fsetExtended">
                <p class="pLegend">Credit Card Details</p>
                <label>Credit Card No:</label>
                <input id="txtCreditCardNumber" type="text" class="ipBoxes" maxlength="20" onkeypress="return looseNumbersOnly(event)" onchange="validate(this)"/>
                <div id="divCreditCardNumberError" class="divError"></div>
                <br />
                <label>Credit Card CVV:</label>
                <input id="txtCreditCardCVV" type="text" maxlength="6" onkeypress="return numbersOnly(event)" />
                <br />
                <label>Credit Card Expiry:</label>
                <select id="selCreditCardMonth" onchange="validate(this)">
                    <option value="-1">Month</option>
                    <option value="1">01</option>
                    <option value="2">02</option>
                    <option value="3">03</option>
                    <option value="4">04</option>
                    <option value="5">05</option>
                    <option value="6">06</option>
                    <option value="7">07</option>
                    <option value="8">08</option>
                    <option value="9">09</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option>
                </select> /
                <select class="ipInline" id="selCreditCardYear" onchange="validate(this)">
                    <option value="-1">Year</option>
                    <option value="2010">2010</option>
                    <option value="2011">2011</option>
                    <option value="2012">2012</option>
                    <option value="2013">2013</option>
                    <option value="2014">2014</option>
                    <option value="2015">2015</option>
                    <option value="2015">2016</option>
                    <option value="2015">2017</option>
                </select>
                <div id="divCreditCardExpiryError" class="divError" ></div>
                <br />
                <label>Credit Card Type:</label>
                <select class="ipBoxes" id="selCreditCardType" onchange="validate(this)">
                    <option value="-1">Select</option>
                    <option value="1">American Express</option>
                    <option value="2">MasterCard</option>
                    <option value="3">Visa</option>
                </select>
                <div id="divCreditCardTypeError" class="divError"></div>
                <br />
                <label>Credit Card Holder:</label>
                <input id="txtCreditCardHolder" type="text"  maxlength="30" class="ipBoxes" />
                <br /><br />
                <label>Country:</label>
                <select class="ipBoxes" id="selCountry">
                    <option value="00">Select</option>
                    <option value="AU">Australia</option>
                    <option value="CN">China</option>
                    <option value="HK">Hong Kong</option>
                    <option value="IN">India</option>
                    <option value="JP">Japan</option>
                    <option value="SG">Singapore</option>
                    <option value="MY">Malaysia</option>
                </select>
                <br />
                <label>City:</label><input id="txtCity" type="text" maxlength="30" class="ipBoxes" />
                <br />
                <label>State:</label><input id="txtState" type="text" maxlength="30" class="ipBoxes" />
                <br />
                <label>Address Line 1:</label><input id="txtAddressLine1" type="text" maxlength="30" class="ipBoxes" />
                <br />
                <label>Address Line 2:</label><input id="txtAddressLine2" type="text" maxlength="30" class="ipBoxes" />
                <br />
                <label>Postal Code:</label><input id="txtPostalCode" type="text" maxlength="10" onkeypress="return looseNumbersOnly(event)"/>
            </fieldset><!--ends fset Credit card details-->
            <div id="divButtons">
                <input type="button" id="btnSave" value="Register" onclick="registerCustomer()"/>
                <input class="ipInline" type="button" id="btnReset" value="Reset" onclick="resetForm()"/>
                <div id="divSystemError" class="divError"></div>
            </div>
        </form>
    </div><!--ends divFormsWrap-->
    
</div> <!-- ends main -->

<div id="divFooter">
    <div id="divFooterLeft">&#169 Copyright 2010 Celestial Home</div>
    <div id="divFooterRight"> Site Design by <a href="#" id="aDreamArchitect"><img src="images/dream.png" alt="Dream Architect"/></a></div>
    <div id="divFooterCenter"><img src="images/visa.gif" alt=""/><img src="images/paypal.png" alt="" /></div>
</div><!--ends divFooter-->

</body>
</html>
